<!--
 * @Author: your name
 * @Date: 2021-04-17 10:32:10
<<<<<<< HEAD
 * @LastEditTime: 2021-04-20 18:57:18
=======
 * @LastEditTime: 2021-04-18 15:36:59
>>>>>>> origin/yuanjiaru
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \智慧医疗项目\app\src\views\pages\patient.vue
-->
<template>
  <div class="patient">
    <h6>患者管理</h6>
    <hr color="#40B3FF" width="100%" height="20px">
    <div class="search">
      <input type="text" placeholder="请输入要搜索的患者姓名/ID"  v-model="ipt" @input="handleSearch" />
     <button>搜索</button>
    </div>
    
    <div v-if="ipt!=='' ">
      <el-table :data="renderList" border style="width: 100%">
      <el-table-column prop="serial" label="序号" width="100"> </el-table-column>
      <el-table-column prop="id" label="用户ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="患者姓名" width="180"> </el-table-column>
      <el-table-column prop="tel" label="手机号" width="180"> </el-table-column>
      <el-table-column prop="age" label="年龄" width="180"> </el-table-column>
      <el-table-column prop="number" label="问诊次数" width="180"> </el-table-column>
      <el-table-column prop="money" label="支付金额" width="180"> </el-table-column>
      <el-table-column prop="handle" label="操作" @click="detail"> 
         <el-button @click="detail">详情</el-button>
      </el-table-column>
    
    </el-table>

    </div>
    <div v-else>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="serial" label="序号" width="100"> </el-table-column>
      <el-table-column prop="id" label="用户ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="患者姓名" width="180"> </el-table-column>
      <el-table-column prop="tel" label="手机号" width="180"> </el-table-column>
      <el-table-column prop="age" label="年龄" width="180"> </el-table-column>
      <el-table-column prop="number" label="问诊次数" width="180"> </el-table-column>
      <el-table-column prop="money" label="支付金额" width="180"> </el-table-column>
      <el-table-column prop="handle" label="操作" @click="detail"> 
         <el-button @click="detail">详情</el-button>
      </el-table-column>
    
    </el-table>
    </div>
    
    <!-- <button @click="detail">详情</button> -->

      <div class="block">
    <span class="demonstration">直接前往</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage3"
      :page-size="100"
      layout="prev, pager, next, jumper"
      :total="1000">
    </el-pagination>
  </div>
 
    <!-- <router-view></router-view> -->
  </div>
</template>

<script>
<<<<<<< HEAD
import axios from "axios";
export default {
  created() {
    axios.get("/api/list").then((res) => {
      console.log(res);
      this.renderList = res.data.renderList;
      this.tableData = res.data.renderList;
      console.log(this.renderList, this.tableData);
    });
  },
  data() {
    return {
      currentPage3: 5,
      ipt: "",
      tableData: [],
      renderList: [],
    };
  },
  methods: {
    //点击跳转详情页
    detail() {
      this.$router.push("/home/detail");
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //  模糊搜索
    handleSearch() {
      if (this.ipt === "") this.renderList = this.tableData;

      this.renderList = this.tableData.filter((item) => {
        return item.name.includes(this.ipt) || item.id.includes(this.ipt);
      });
    },
  },
};
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
body,
html {
  width: 100%;
  height: 100%;
}
.patient {
  width: 100%;
  height: 100%;
  h6 {
    font-size: 16px;
    font-weight: normal;
  }
  hr {
    margin-top: 5px;
  }
  .search {
    margin-bottom: 10px;
    margin-top: 10px;
    float: right;
    button {
      margin-left: 10px;
      background: #169bd5;
      border: 0;
      width: 50px;
      height: 20px;
      color: #fff;
      border-radius: 20px;
    }
  }
  .block{
     margin-top:50px;
  }
  tbody{
      tr{
        text-align: center;
      }
  }
=======
export default {
  data() {
    return {
        currentPage3: 5,
        ipt: '',
        renderList:[],//搜索数组
        tableData: [
        {
          serial:"1",
          id:"yl23455",
          name: "王小虎",
          tel:"13489009839",
          age:"18",
          number:"12",
          money:"320",
          handle:"详情"
        },
        {
          serial:"2",
          id:"yl23456",
          name: "李小虎",
          tel:"13489009839",
          age:"18",
          number:"22",
          money:"320",
          handle:"详情"
        },
        {
          serial:"3",
          id:"yl23457",
          name: "张小虎",
          tel:"13489009839",
          age:"18",
          number:"22",
          money:"320",
          handle:"详情"
          
        },
        
      ],
    };
  },
  methods:{
     detail(){
       this.$router.push("/home/detail")
     },
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleSearch(){
        this.renderList=this.tableData.filter(item=>{
          return item.name.includes(this.ipt)||item.id.includes(this.ipt)
        })
      }


  }
};
</script>
<style lang="scss">
*{
  margin:0;
  padding:0;
  list-style:none;
}
body,html{
  width:100%;
  height:100%;
}
.patient{
  width:100%;
  height:100%;
  h6{
    font-size:16px;
    font-weight:normal;
  }
  hr{
    margin-top:5px;
  }
  .search{
    float:right;
    button{
      margin-left:10px;
      background:#169BD5;
      border:0;
      width:50px;
      height: 20px;
      color:#fff;
      border-radius:20px;
    }
  }
>>>>>>> origin/yuanjiaru
}
</style>